<template>
    <div class="wrap">
        <div class="inner">
            <div class="section page-info">
                <div class="page-title">基本信息</div>
                <div class="page-tip" style="display: flex;">
                    <div class="product hand" @click="toProduct">
                        <!-- <svg t="1733132906270" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10956" width="48" height="48">
                            <path d="M301.176471 141.071059a170.646588 170.646588 0 0 1 170.646588 170.646588V482.484706H301.176471a170.646588 
                  170.646588 0 0 1 0-341.353412z m0 421.647059h170.646588v170.646588A170.706824 170.706824 0 1 1 301.176471 562.718118z 
                  m421.647058-421.647059a170.706824 170.706824 0 0 1 0 341.353412H552.176941V311.717647A170.646588 
                  170.646588 0 0 1 722.823529 141.071059z m-170.646588 421.647059H722.823529a170.646588 170.646588 0 1 
                  1-170.646588 170.646588V562.718118z" fill="#000" p-id="10957"></path>
                        </svg> -->
                        <div>
                            <div style="font-size: 14px; color: #65666b;margin-bottom: 5px;">商品数量</div>
                            <div style="font-size: 27px;">{{ num.productNum }}</div>
                        </div>
                    </div>
                    <div class="user hand" @click="toUser">
                        <!-- <svg t="1733133867751" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="12882" width="48" height="48">
                            <path d="M592.896 589.141333c96.938667-34.816 166.570667-131.072 166.570667-244.053333 0-142.677333-110.933333-258.048-247.466667-258.048-136.533333 
                  0-247.466667 115.712-247.466667 258.048 0 112.981333 69.632 208.896 166.570667 244.053333-162.816 40.96-284.672 
                  202.069333-284.672 383.658667L877.226667 972.8C877.226667 791.210667 755.712 630.101333 592.896 
                  589.141333L592.896 589.141333zM592.896 589.141333" fill="#000" p-id="12883"></path>
                        </svg> -->
                        <div>
                            <div style="font-size: 14px; color: #65666b;margin-bottom: 5px;">用户数量</div>
                            <div style="font-size: 27px;">{{ num.userNum }}</div>
                        </div>
                    </div>
                    <div class="order hand" @click="toOrder">
                        <!-- <svg t="1733133942848" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="15203" width="48" height="48">
                            <path d="M618.666667 192v170.666667a42.666667 42.666667 0 0 0 42.666666 42.666666h170.666667v384a42.666667 42.666667 0 0 1-42.666667 
                  42.666667H277.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V234.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h341.333334z 
                  m42.666666 0l170.666667 170.666667h-149.333333a21.333333 21.333333 0 0 1-21.333334-21.333334V192zM362.666667 
                  490.666667a21.333333 21.333333 0 0 0 0 42.666666h256a21.333333 21.333333 0 0 0 0-42.666666H362.666667z m0 
                  128a21.333333 21.333333 0 0 0 0 42.666666h256a21.333333 21.333333 0 0 0 0-42.666666H362.666667z"
                                fill="#000" p-id="15204"></path>
                        </svg> -->
                        <div>
                            <div style="font-size: 14px; color: #65666b;margin-bottom: 5px;">订单数量</div>
                            <div style="font-size: 27px;">{{ num.orderNum }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!--  -->
            <div class="section">
                <div class="section-title">今日待办</div>
                <div class="page-todo">
                    <div class="tip-item hand" @click="toProduct">
                        <div style="text-align: center;">
                            <div style="font-size: 20px;color: red;font-weight: bold;">{{ num.daiShangjiaNum }}</div>
                            <div style="font-weight: bold;margin-top: 10px;">待上架商品</div>
                        </div>
                    </div>
                    <div class="tip-item hand" @click="toFeedback">
                        <div style="text-align: center;">
                            <div style="font-size: 20px;color: red;font-weight: bold;">{{ num.fankuiNum }}</div>
                            <div style="font-weight: bold;margin-top: 10px;">待查看意见反馈</div>
                        </div>
                    </div>
                    <div class="tip-item hand" @click="toRefund">
                        <div style="text-align: center;">
                            <div style="font-size: 20px;color: red;font-weight: bold;">{{ num.shouhouNum }}</div>
                            <div style="font-weight: bold;margin-top: 10px;">待审核售后</div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display: flex;">
                <div class="section section-left">
                    <div class="section-title">流量概况</div>
                    <div class="page-flow">
                        <div>
                            <div>
                                <div>今日访客数</div>
                                <div>{{ num.dayUserNum1 }}</div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <div>昨日访客数</div>
                                <div>{{ num.dayUserNum2 }}</div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <div>前七日访客数</div>
                                <div>{{ num.dayUserNum3 }}</div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <div>前三十日访客数</div>
                                <div>{{ num.dayUserNum4 }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="section section-right">
                    <div class="section-title">今日概括</div>
                    <div class="page-recap">
                        <div class="hand" @click="toOrderNum">
                            <div>
                                <div>今日订单数</div>
                                <div>{{ num.dayOrderNum }}</div>
                            </div>
                        </div>
                        <div class="page-flow">
                            <div>
                                <div>
                                    <div>今日交易额</div>
                                    <div class="num">{{ num.dayOrderPrice }}</div>
                                </div>
                            </div>
                            <div class="hand" @click="toReview">
                                <div>
                                    <div>今日新增评论</div>
                                    <div class="num">{{ num.dayCommentNum }}</div>
                                </div>
                            </div>
                            <div>
                                <div>
                                    <div>今日新增用户数</div>
                                    <div class="num">{{ num.dayZengUserNum }}</div>
                                </div>
                            </div>
                            <div class="hand" @click="toProduct">
                                <div>
                                    <div>上架商品数量</div>
                                    <div class="num">{{ num.shangjiaNum }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Index",
    components: {
    },
    data() {
        return {
            num: "",
        };
    },
    computed: {

    },
    watch: {},
    created() {
        this.fiflet()
    },
    mounted() {

    },
    methods: {
        fiflet() {
            this.$api({
                url: '/admin_service.php',
                method: "get",
                data: {
                    action: "data_tongji",
                },
            }).then((res) => {
                let data = res.data;
                if (res.code == 200) {
                    this.num = data
                    console.log(this.num);

                }
            });
        },
        toProduct() {
            this.$router.push('product-list');
        },
        toUser() {
            this.$router.push('user-list');
        },
        toOrder() {
            this.$router.push('order-list');
        },
        toFeedback() {
            if (this.num.fankuiNum != 0) {
                this.$router.push('feedback-list');
            }
        },
        toRefund() {
            if (this.num.shouhouNum != 0) {
                this.$router.push('refund-list');
            }
        },
        toOrderNum() {
            if (this.num.dayOrderNum != 0) {
                this.$router.push('order-list');
            }
        },
        toReview() {
            if (this.num.dayCommentNum != 0) {
                this.$router.push('review-list');
            }
        },
    },
};
</script>

<style scoped lang="less">
.hand {
    cursor: pointer;
}

.inner {
    padding: 0;
    text-align: left;

    .page-info {
        text-align: left;
        background: #fff;

        .page-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .page-tip {
            width: 55%;
            font-size: 12px;

            .product,
            .user,
            .order {
                width: 33.3%;
                color: #000;
                padding: 20px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                margin-right: 20px;

                div {
                    margin-left: 10px;
                }
            }

            .product {
                // background: linear-gradient(to right, #6adbf8, #2aace6);
                background: linear-gradient(to bottom, #fff, #f9f9f9);
                background: #f6f6f6;
            }

            .user {
                // background: linear-gradient(to right, #f7b8b5, #f6918e);
                background: linear-gradient(to bottom, #fff, #f9f9f9);
                background: #f6f6f6;
            }

            .order {
                // background: linear-gradient(to right, #abc0f8, #7fa1fc);
                background: linear-gradient(to bottom, #fff, #f9f9f9);
                background: #f6f6f6;
            }
        }
    }


    .section {
        margin-bottom: 20px;
        background: #fff;
        padding: 20px;
        border-radius: 6px;

        .page-todo {
            width: 45%;
            display: flex;

            .tip-item {
                width: 33.3%;
                height: 110px;
                border-radius: 6px;
                background: #f6f6f6;
                margin-right: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }


        .page-flow {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            >div {
                width: 48%;
                height: 100px;
                border: 1px solid #dcdcdc;
                border-radius: 6px;
                margin: 10px 0;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;

                >div {
                    >div:nth-of-type(1) {
                        font-size: 13px;
                        font-weight: bold;
                        padding: 10px 0;
                    }

                    >div:nth-last-child(1) {
                        font-size: 25px;
                        font-weight: bold;
                        color: #f48559;
                    }
                }
            }
        }
    }

    .section-title {
        .flex-between();
        text-align: left;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
    }

    .section-left {
        // border: 1px solid #ddd;
        width: 40%;
        margin-right: 20px;
    }

    .section-right {
        // border: 1px solid #ddd;
        width: 60%;
    }
}

.page-recap {
    display: flex;

    >div:nth-child(1) {
        width: 30%;
        border: 1px solid #dcdcdc;
        border-radius: 6px;
        margin: 10px 20px 10px 0;
        background: linear-gradient(to bottom, #fff, #f9f9f9);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        >div {
            >div:nth-child(1) {
                font-size: 13px;
                font-weight: bold;
            }

            >div:nth-child(2) {
                font-size: 40px;
                color: #f00;
                font-weight: bold;
                padding-top: 50px;
            }

        }
    }

    >div:nth-child(2) {
        width: 68%;

        >div {
            background: linear-gradient(to bottom, #fff, #f9f9f9);
        }

        .num {
            padding-top: 5px;
            color: #f00 !important;
        }
    }
}
</style>